import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'
import postcssPxToViewport from 'postcss-px-to-viewport'
// https://vite.dev/config/
export default defineConfig({
  plugins: [react()],
  css: {
    postcss: {
      plugins: [
        postcssPxToViewport({
          // 这里将 viewportWidth 设置为 960，
          // 这意味着将把该值作为设计稿的参考宽度。
          // 后续的单位转换将基于这个宽度进行计算。
          // 例如，如果你在 CSS 中有一个元素的宽度为 480px，
          // 根据转换公式 (元素的像素值 / viewportWidth) * 100，
          // 这个元素的宽度会被转换为 (480 / 960) * 100 = 50vw，
          // 从而将 px 单位转换为 vw 单位。
          viewportWidth: 960,
          // 这里指定使用 vw 作为转换后的视窗单位。vw 表示视窗宽度的百分比，1vw 等于视窗宽度的 1%
          viewportUnit: 'vw',
          // 这个参数确保只有大于或等于 1px 的元素才会被转换。
          minPixelValue: 1,
          // 启用 mediaQuery 功能后，插件可以根据不同的视窗大小使用不同的转换规则。
          // 这意味着可以在不同的屏幕尺寸下，根据视窗的实际大小调整元素的样式，使布局更加灵活，
          // 能够更好地适应不同的设备，如手机、平板和桌面。
          // 例如，在小屏幕设备上，可以使用更紧凑的布局，而在大屏幕上可以使用更宽松的布局。
          mediaQuery: true,
          //允许替换规则，这可能意味着可以根据不同的条件灵活地替换 px 单位，例如结合 vw 和 vh 等视窗单位，而不仅仅局限于 vw 。
          replaceRules: true,
          //白名单
          include: /^(?!.*ignore).*$/
        })
      ]
    }
  },
  //跨域
  server: {
    proxy: {
      '/api': {
        target: 'http://124.221.74.149:3000/',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      },
      '/baidutok': {
        target: 'https://aip.baidubce.com/oauth/2.0', // 目标服务器地址
        changeOrigin: true,             // 是否改变源地址
        secure: false,  
        rewrite: (path) => path.replace(/^\/baidutok/, '') // 重写路径
      },
       '/baidu': {
        target: 'https://aip.baidubce.com/rpc/2.0',   // 后端 API 地址
        changeOrigin: true,                // 改变请求源，避免 CORS 问题
        secure: false,                     // 如果是https接口，需要配置为false
        rewrite: (path) => path.replace(/^\/baidu/, ''),  // 重写路径，去掉/api前缀
      },
    }
  }
})
